<template>
  <view class="layout edit">
    <form>
      <view class="cu-form-group">
        <view class="title">收货人</view>
        <input v-model="formData.name" name="input" />
      </view>
      <view class="cu-form-group">
        <view class="title">手机号</view>
        <input v-model="formData.mobile" name="input" />
        <!--        <view class="cu-capsule radius">
          <view class="cu-tag bg-blue ">+86</view>
          <view class="cu-tag line-blue">中国大陆</view>
        </view> -->
      </view>

      <!-- #ifndef MP-ALIPAY -->
      <view class="cu-form-group" v-if="state.address.data.length > 0">
        <!-- @change="MultiChange" -->

        <view class="title">选择地址</view>
        <picker mode="multiSelector" @columnchange="onMultiColumnChange" :value="multiIndex" :range="multiArray">
          <view class="picker">{{ multiArray[0][multiIndex[0]] }},{{ multiArray[1][multiIndex[1]] }},{{ multiArray[2][multiIndex[2]] }}</view>
        </picker>
      </view>
      <!-- #endif -->

      <view class="cu-form-group">
        <view class="title">详情地址</view>
        <input v-model="formData.address" name="input" />
        <!-- <text class="cuIcon-locationfill text-orange"></text> -->
      </view>

      <view class="cu-form-group margin-top">
        <view class="title">设为默认地址</view>
        <switch @change="onSwitchIsDefault" color="#e54d42" :class="formData.is_default === 1 ? 'checked' : ''" :checked="formData.is_default === 1 ? true : false"></switch>
      </view>
    </form>
  </view>
</template>

<script>
import baseMixins from "@/utils/mixins";
import uniApp from "@/utils/uni-app";

function field2index(arr, value, field = "id") {
  let index = -1;
  for (let i = 0; i < arr.length; i++) {
    if (arr[i][field] === value) {
      index = i;
      break;
    }
  }
  return index;
}

export default {
  mixins: [baseMixins],
  data() {
    return {
      multiArray: [[], [], []],
      multiIndex: [0, 0, 0], // 当前选择的索引

      formData: {
        id: 0,
        name: "",
        mobile: "",
        address: "",
        lang_address: "",
        province: 0,
        city: 0,
        region: 0,
        is_default: 0
      }
    };
  },
  onLoad(options) {
    this.formData.id = options.id ? options.id : 0;
    this.init();
  },
  methods: {
    async init() {
      if (this.formData.id > 0) {
        let result1 = await this.$api.user.addressDetail(this.formData.id);
        this.formData = result1.data.data;
      }
      // 省
      let provinces = await this.$store.dispatch("address/getProvince");
      let provinceArr = [];
      provinces.forEach((item, index) => {
        if (this.formData.id > 0 && Number(item.id) === Number(this.formData.province)) {
          this.multiIndex[0] = index;
        }
        provinceArr.push(item.name);
      });
      this.multiArray[0] = provinceArr;
      // 市
      let citys = await this.$store.dispatch("address/getCity", { pindex: this.multiIndex[0] });
      let cityArr = [];
      citys.forEach((item, index) => {
        if (this.formData.id > 0 && Number(item.id) === Number(this.formData.city)) {
          this.multiIndex[1] = index;
        }
        cityArr.push(item.name);
      });
      this.multiArray[1] = cityArr;
      // 区
      let regions = await this.$store.dispatch("address/getRegion", {
        pindex: this.multiIndex[0],
        cindex: this.multiIndex[1]
      });
      let regionArr = [];
      regions.forEach((item, index) => {
        if (this.formData.id > 0 && Number(item.id) === Number(this.formData.region)) {
          this.multiIndex[2] = index;
        }
        regionArr.push(item.name);
      });
      this.multiArray[2] = regionArr;
      this.$forceUpdate();
    },
    onMultiColumnChange({ detail }) {
      this.multiIndex[detail.column] = detail.value;
      if (detail.column === 0) {
        this.multiIndex = [detail.value, 0, 0];
        this.$store
          .dispatch("address/getCity", { pindex: detail.value })
          .then(city => {
            let cityArr = [];
            city.forEach(item => {
              cityArr.push(item.name);
            });
            this.multiArray[1] = cityArr;
            return city;
          })
          .then(city => {
            this.$store
              .dispatch("address/getRegion", {
                pindex: this.multiIndex[0],
                cindex: this.multiIndex[1]
              })
              .then(region => {
                let regionArr = [];
                region.forEach(item => {
                  regionArr.push(item.name);
                });
                this.multiIndex[2] = 0;
                this.multiArray[2] = regionArr;
                this.$forceUpdate();
                return region;
              });
          });
      } else if (detail.column === 1) {
        this.multiIndex = [this.multiIndex[0],detail.value,0];
        this.$store
          .dispatch("address/getRegion", {
            pindex: this.multiIndex[0],
            cindex: this.multiIndex[1]
          })
          .then(region => {
            let regionArr = [];
            region.forEach(item => {
              regionArr.push(item.name);
            });
            this.multiArray[2] = regionArr;
            
            this.$forceUpdate();
            return region;
          });
      } else if (detail.column === 2) {
        this.$forceUpdate();
      }
    },
    onSwitchIsDefault({ detail }) {
      this.formData.is_default = detail.value ? 1 : 0;
    }
  },
  onNavigationBarButtonTap(e) {
    if (e.index === 0) {
      let formData = Object.assign(this.formData, {
        province: this.$store.state.address.data[this.multiIndex[0]].id,
        city: this.$store.state.address.data[this.multiIndex[0]].child[this.multiIndex[1]].id,
        region: this.$store.state.address.data[this.multiIndex[0]].child[this.multiIndex[1]].child[this.multiIndex[2]].id,
        long_address: [
          this.$store.state.address.data[this.multiIndex[0]].name,
          this.$store.state.address.data[this.multiIndex[0]].child[this.multiIndex[1]].name,
          this.$store.state.address.data[this.multiIndex[0]].child[this.multiIndex[1]].child[this.multiIndex[2]].name,
          this.formData.address
        ].join(",")
      });
      if (!this.formData.id) {
        this.$api.user
          .addAddress(formData)
          .then(_ => {
            uniApp.toast("操作成功");
            uni.navigateBack();
          })
          .catch(e => {
            uniApp.alert(e.data.msg);
          });
      } else {
        this.$api.user
          .editAddress(formData)
          .then(_ => {
            uniApp.toast("操作成功");
            uni.navigateBack();
          })
          .catch(e => {
            uniApp.alert(e.data.msg);
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped></style>
